<template>
  <a-select v-model="value" :size="props.size" :placeholder="props.placeholder" :style="props.style"
    :disabled="props.disabled" :allow-clear="props.allowClear" :field-names="props.fieldNames"
    @change="handleChangeEvent($event)">
    <a-option v-for="(item, index) in props.data" :disabled="props.disabledKey.includes(item.value)" :key="index"
      :value="item[props.fieldNames.value]" :label="item[props.fieldNames.label]" />
  </a-select>
</template>

<script setup>
import { ref, watch } from 'vue'
const emit = defineEmits(['update:modelValue', 'change'])
const value = ref()

const props = defineProps({
  modelValue: { type: [String, Number] },
  fieldNames: { type: Object, default: { value: 'value', label: 'title' } },
  size: { type: String, default: 'medium' },
  style: { type: Object, default: {} },
  data: { type: Array, default: () => [] },
  placeholder: { type: String, default: '请选择' },
  disabled: { type: Boolean, default: false },
  allowClear: { type: Boolean, default: true },
  disabledKey: { type: Array, default: () => [] }
})

watch(
  () => props.modelValue,
  (vl) => {
    value.value = vl
  },
  { immediate: true }
)
watch(
  () => value.value,
  (v) => {
    emit('update:modelValue', value.value)
  }
)

const handleChangeEvent = async (value) => {
  emit('update:modelValue', value)
  emit('change', value)
}
</script>
